<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    /* * {
        margin: 0;
        padding: 0;
    }

    .box {
        width: 250px;
        margin: 100px auto;
    }

    li {
        background-image: url(../image/sp.gif);
    }

    li {
        float: left;
        width: 25px;
        height: 24px;
        margin: 25px;
        background-color: pink;
        list-style-type: none;
    } */
    .look li {
        /* float: left; */
        display: inline-block;
        /* position: absolute; */
    }

    .look {
        position: relative;
        height: 4rem;
        width: 4rem;
    }

    li img {
        width: 100px;
        height: 100px;
    }

    .right {
        border: solid;
        height: 4rem;
        width: 4rem;
        background: no-repeat center top;
        background-size: 4rem 4rem;
    }

    .main {
        display: flex;
    }
</style>

<body>
    <script>
        // 计算屏幕宽度
        var screen = document.documentElement.clientWidth;
        // 计算字体大小，取屏幕宽度的16分之一
        var size = screen / 16;
        // 设置根元素字体大小
        document.documentElement.style.fontSize = size + 'px';
    </script>
    <!-- 精灵图 -->
    <!-- <div class="box">
        <ul>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>
    <script>
        var lis = document.querySelectorAll('li');
        for (var i = 0; i < lis.length; i++) {
            var x = i * (80 - 126);

            lis[i].style.backgroundPosition = '- ' + x + 'px' + ' 0px'
        }
    </script> -->
    <!-- <div class="btns">
        <button>按钮1</button>
        <button>按钮2</button>
        <button>按钮3</button>
        <button>按钮4</button>
        <button>按钮5</button>
    </div> -->
    <!-- <script>
        var btns = document.querySelectorAll('button');
        for (var i = 0; i < btns.length; i++) {
            var sign = 0;
            btns[i].onclick = function () {
                this.style.backgroundColor = 'red';
                sign = 1;
                for (var j = 0; j < btns.length; j++) {
                    btns[j].style.backgroundColor = 'white';
                }
                this.style.backgroundColor = 'pink';
            }
        }
    </script> -->
    <div class="main">
        <div class="look">
            <li><img src="../1.jpg"></li>
            <li><img src="../2.jpg"></li>
            <li><img src="../3.jpg"></li>
            <li><img src="../4.jpg"></li>
            <li><img src="../5.jpg"></li>
            <li><img src="../6.jpg"></li>
            <li><img src="../7.jpg"></li>
            <li><img src="../8.jpg"></li>
            <li><img src="../9.jpg"></li>
        </div>
        <div class="right">
            <img src="" alt="">
        </div>
    </div>
    <script>
        var imgs = document.querySelector(".look").querySelectorAll("img");
        var right = document.querySelector(".right");
        for (var i = 0; i < imgs.length; i++) {
            imgs[i].onclick = function () {
                console.log(this.src);
                right.style.backgroundImage = 'url(' + this.src + ')';
            }
        }
    </script>
    <script>
        (function (doc, win) {
            var docEl = doc.documentElement,
                resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
                recalc = function () {
                    var clientWidth = docEl.clientWidth > 750 ? 750 : docEl.clientWidth;
                    if (!clientWidth) {
                        return
                    };
                    docEl.style.fontSize = 100 * (clientWidth / 750) + 'px';
                };
            recalc();
            if (!doc.addEventListener) return;
            win.addEventListener(resizeEvt, recalc, false);
            doc.addEventListener('DOMContentLoaded', recalc, false);
        })(document, window)
    </script>
</body>

</html>